import { TabWidget, ScrollView, LineEdit, Button, ComboBox } from "std-widgets.slint";

component ApiKeyStripe inherits HorizontalLayout {
    in property <string> api-name <=> api-name-text.text;
    in property <string> api-key <=> api-key-lineedit.text;

    api-name-text := Text {
        width: 100px;
        font-size: 16px;
    }

    api-key-lineedit := LineEdit {
        font-size: 16px;
    }
}

component EngineSelectStripe inherits HorizontalLayout {

    in property <string> project-name-text <=> project-name-text.text;
    in property <[string]> selector-model <=> selector.model;

    project-name-text := Text {
        width: 100px;  // This param needs tuning.
        font-size: 16px;
    }

    selector := ComboBox { }
}

export component SettingWindow inherits Window {
    preferred-width: 400px;
    preferred-height: 250px;

    private property <[string]> engines: ["DeepSeek", "Youdao", "Qwen"];

    in property <string> deepseek-api-key <=> deepseek-stripe.api-key;
    in property <string> qwen-api-key <=> qwen-stripe.api-key;

    VerticalLayout {
        TabWidget {
            Tab {

                title: "API Keys from AI providers";

                VerticalLayout {
                    alignment: LayoutAlignment.start;
                    deepseek-stripe := ApiKeyStripe {
                        api-name: "DeepSeek";
                        api-key: "";
                    }

                    qwen-stripe := ApiKeyStripe {
                        api-name: "Qwen";
                        api-key: "";
                    }
                }
            }

            Tab {
                title: "Behaviour";
                // True function is not implemented yet
                VerticalLayout {
                    alignment: LayoutAlignment.start;
                    word-translation-stripe := EngineSelectStripe {
                        project-name-text: "Word Translation";
                        selector-model: engines;
                    }

                    sentence-translation-stripe := EngineSelectStripe {
                        project-name-text: "Sentence Translation";
                        selector-model: engines;
                    }
                }
            }
        }

        @children
    }
}

export component SettingRect inherits Rectangle {
    preferred-width: 400px;
    preferred-height: 250px;

    private property <[string]> engines: ["DeepSeek", "Youdao", "Qwen"];

    in property <string> deepseek-api-key <=> deepseek-stripe.api-key;
    in property <string> qwen-api-key <=> qwen-stripe.api-key;

    VerticalLayout {

        alignment: LayoutAlignment.start;

        Text {
            text: "API Keys from AI providers";
        }

        deepseek-stripe := ApiKeyStripe {
            api-name: "DeepSeek";
            api-key: "";
        }

        qwen-stripe := ApiKeyStripe {
            api-name: "Qwen";
            api-key: "";
        }

        Rectangle {
            height: 24px;
            VerticalLayout {
                Rectangle {
                    width: 1px;
                    background: gray;
                }
            }
        }

        Text {
            text: "Behaviour";
        }

        word-translation-stripe := EngineSelectStripe {
            project-name-text: "Word Translation";
            selector-model: engines;
        }

        sentence-translation-stripe := EngineSelectStripe {
            project-name-text: "Sentence Translation";
            selector-model: engines;
        }

        @children
    }
}
